<template>

  <view class="container">
    <view class="userinfo">
      <button v-if="!hasUserInfo && canIUse" open-type="getUserInfo" @getuserinfo="getUserInfo"> 获取头像昵称 </button>
      <block v-else>
        <image @tap="bindViewTap" class="userinfo-avatar" :src="getStoreUserInfo.avatarUrl" :mode="cover"></image>
        <text class="userinfo-nickname">{{getStoreUserInfo.nickName}}</text>
      </block>
    </view>
    <view class="usermotto">
      <text>hello </text>
<!--      <van-button type="default" block size="large" width="">开始点单</van-button>-->
    </view>
  </view>
</template>

<script>
  import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
  export default {
    data() {
      return {
          canIUse: wx.canIUse('button.open-type.getUserInfo'),
          motto: 'Hello World',
          hasUserInfo:false
      }
    },
    computed: {
      ...mapState(['userInfo']),
      ...mapGetters(['getHasUserInfo','getStoreUserInfo'])
    },
    mounted()  {
      wx.getSetting({
        success (res){
          if (res.authSetting['scope.userInfo']) {
            // 已经授权，可以直接调用 getUserInfo 获取头像昵称
            wx.getUserInfo({
              success: function(res) {
                console.log(res.userInfo)
              }
            })
          }
        }
      })
    },
    methods:{
        ...mapMutations(['setUserInfo','testmutations','setHasUserInfo']),
        //事件处理函数
        bindViewTap: function() {
          wx.navigateTo({
            url: '../logs/logs'
          })
        },
      getUserInfo(e){
            console.log("getuserinfo:")
            console.log(e.target.userInfo);
            //target.userInfo
            // console.log(e.detail.userInfo);
            this.setUserInfo(e.target.userInfo);
            this.hasUserInfo = true;
            console.log(this.getStoreUserInfo)
            //导航到
            wx.switchTab({
                url:"../index/main"
            })
            // wx.redirectTo({
            //   url:"../index/main"
            // })
        }
      }
  }

</script>

<style>

  /**index.wxss**/
  .container{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 200rpx 0;
    box-sizing: border-box;

  }
  .userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .userinfo-avatar {
    width: 128px;
    height: 128px;
    margin: 20px;
    border-radius: 50%;
  }

  .userinfo-nickname {
    color: #aaa;
  }

  .usermotto {
    margin-top: 150px;
  }
</style>
